<template>
  <transition name="fade">
    <div class="detial_wrap"  @touchmove.stop="stop_slider" @touchstart="start_slider">
      <div class="fixed_wrap">
        <back title="商品详情"></back>
      </div>

      <div class="scroll_wrap" ref="scroll_wrap">
          <div class="swiper_wrap">
            <div class="img_wrap">
              <slider v-if="item_detial.maxImg" @scroll_index="set_active"
                      :btn="true"
                      :active_index="active_index"
              >
                <div v-for="(item, index) in item_detial.maxImg" class="swiper-slide">
                  <img v-lazy="item" alt="">
                </div>
              </slider>
            </div>
          </div>
          <div class="img_nav_wrap">
            <div v-for="(item, index) in item_detial.minImg">
              <div :class="index==active_index ? 'active':''">
                <img :src="item" @click="set_index" :data-id="index" alt="">
              </div>
            </div>
          </div>
          <div v-show="item_detial.endTime<=0" class="text_wrap">
            <h1>{{item_detial.names}}</h1>
            <div>规格：{{item_detial.spaces}}</div>
            <p>¥{{item_detial.price}} 元 / {{item_detial.unit}}</p>
          </div>
          <div v-show="item_detial.endTime>0" class="miaosha_wrap">
            <div>
              <div>
                <div>
                  <span>¥{{item_detial.salesPrice}}/{{item_detial.unit}}</span>
                  <s>¥{{item_detial.price}}</s>
                  <b>限时抢购</b>
                </div>
                <p>{{item_detial.names}}</p>
              </div>
              <h5>
                <p>距结束还剩:</p>
                <div>
                  <span v-show="d>0">{{d}}天</span>
                  <b>{{h}}</b>:
                  <b>{{m}}</b>:
                  <b>{{s}}</b>
                </div>
              </h5>
            </div>
            <p>规格：{{item_detial.spaces}}</p>
          </div>
          <div class="about_info">
            <span>服务信息</span>
            <div>
              <h1></h1>
              <p></p>
            </div>
            <h5>
              <div><span></span> <p>六环内满500免运费（注：房山区、门头沟区、大兴区执行六环内配送政策主要指城区）</p></div>
              <div><span></span> <p>15天内无理由退货（注：不影响二次销售情况下，并且需要承担运费）</p></div>
              <div><span></span> <p>送货只能送到车辆可到达位置，不负责卸货及搬运，需业主自行解决，大于大件物品，司机可协助卸车，但非司机必须履行的义务</p></div>
              <div><span></span> <p>如有卸货需求，请在订单中备注</p></div>
              <div><span></span> <p>用户下单后次日配送货品</p></div>
            </h5>
          </div>
        </div>
        <div class="add_car_wrap">
          <span @click="toShopCar"><b v-show="carNumber" :class="carNumberClass">{{carNumber<1000?carNumber:999}}</b></span> <b @click="add_car_number(item_detial.id)">加入购物车</b>
        </div>
    </div>
    </transition>
</template>

<script type="text/ecmascript-6">
  import {get_items_detial} from 'api/detial'
  import slider from '@/base_/slider'
  import back from '@/components/back'
  import { w_scroll_top } from 'assets/dom/dom'
  import {stop_slider,fill_zero} from 'assets/base/base'
  import {mapGetters, mapMutations} from 'vuex'
  import {add_shop_car,get_car_number} from 'api/shop_car'
  import {get_cookie} from 'assets/cookie/cookie'
  export default {
    name: 'detial',
    data() {
      return {
        item_detial: {},
        active_index: 0,
        animate:false,
        d:"",
        h:"",
        m:"",
        s:""
      }
    },
    props: [],
    created() {
        this.get_items_detial()
    },
    beforeDestroy(){
      this.$emit('get_shop_car',true)
      clearInterval(this.timer)
    },
    mounted() {},
    computed: {
      carNumberClass(){
        let c=''
        if(this.carNumber>99){
          c+='big'
        }
        if(this.animate){
          c+=' animate'
        }
        return c
      },
      ...mapGetters([
        'carNumber'
      ])
    },
    methods: {
      start_slider(e){
        this.start={
          X:e.touches[0].pageX,
          Y:e.touches[0].pageY
        }
      },
      stop_slider(e){
        stop_slider(e,this.$refs.scroll_wrap,this.start)
      },
      get_items_detial() {
        get_items_detial({id: this.$route.query.itemId}).then((res) => {
          if (res.status === 200) {
            const _res = res.data
            if (_res.resStatus === 0) {
              this.item_detial = _res.data
              console.log(this.item_detial)
              if(this.item_detial.endTime>0){
                this.daojishi()
              }
            }
          }
        })
      },
      set_index(e) {
        this.active_index = e.target.getAttribute("data-id")
      },
      set_active(id) {
        this.active_index = id
      },
      downLoad(){
        location.href='http://a.app.qq.com/o/simple.jsp?pkgname=com.mingpinjiancai.market'
      },
      back(){
        this.$router.back()
      },
      add_car_number(id){
        add_shop_car({
          token:get_cookie('key'),
          goodsId:id
        }).then((res)=>{
          console.log(res)
          if(res.status===200&&res.data.resStatus===0){
            this.setHint({
              text:'加入购物车成功了',
              ok:true,
              isHint:true
            })
            this.get_car_number()

          }else if(res.data.resStatus===-1){
            this.setIsLogin(false)
          }else{
            this.setHint({
              text:res.data.message,
              ok:false,
              isHint:true
            })
          }
        })
      },
      get_car_number(){
        get_car_number({
          token:get_cookie('key')
        }).then((res)=>{
          console.log(res)
          if(res.status===200&&res.data.resStatus===0){
            this.setCarNumber(res.data.data[0]['no-cart'])
          }
        })
      },
      toShopCar(){
        this.$router.push('/shop_car')
      },
      daojishi(){
        this.timer=setInterval(()=>{
          console.log(4)
          let time_num=this.item_detial.endTime-new Date().getTime()/1000
          if(time_num<0){
            this.m=''
            clearInterval(this.timer)
          }else{
            this.d=Math.floor(time_num/(60*60*24))
            this.h=fill_zero(Math.floor(time_num%(60*60*24)/(60*60)),2);
            this.m=fill_zero(Math.floor(time_num%(60*60)/(60)),2);
            this.s=fill_zero(Math.floor(time_num%(60*60)%(60)),2);
          }

        },1000)
      },
      ...mapMutations({
        setIsLogin: 'SET_IS_LOGIN',
        setCarNumber: 'SET_CAR_NUMBER',
        setHint:'SET_HINT'
      })
    },
    components: {
      slider,
      back
    },
    watch:{
      carNumber(){
        this.animate=true
        setTimeout(()=>{
          this.animate=false
        },280)
      }
    }
  }
</script>

<style scoped lang="scss">
  .detial_wrap{
    position: fixed;
    background:#fff;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    padding-top: 47px;
  }
  .scroll_wrap{
       height: 100%;
       padding-top: 4px;
       padding-bottom: 55px;
       overflow: auto;
       max-width: 768px;
       margin: 0 auto;
       -webkit-overflow-scrolling: touch;
     }
  .swiper_wrap {
    width: 100%;
    padding-top: 56%;
    position: relative;
    background-color: #fff;
  }
  .img_wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  .img_nav_wrap {
    margin-top: 6px;
    position: relative;
    z-index: 4;
    height: 49px;
    padding-right: 60px;
    text-align: center;
    background-color: #fff;
    > div {
      margin: 1px;
      display: inline-block;
      .active {
        border: 1px solid #F14;
      }
      > div {
        display: table-cell;
        vertical-align: middle;
        width: 45px;
        height: 45px;
        background-color: #fff;
        border: 1px solid #ddd;
        overflow: hidden;
        > img {
          width: 100%;
          max-height: 100%;
        }
      }
    }

  }
  .text_wrap{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 30px;
    text-align: left;
    >h1{
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 18px;
    }
    >p{
      margin-top: 20px;
      background-color: #f0f9fe;
      color: #0d96da;
      height: 51px;
      line-height: 51px;
      font-size: 20px;
      padding-left: 15px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    >span{
      color: #bbb;
      display: block;
      height: 13px;
    }
    >h2{
      margin-top: 11px;
      font-size: 12px;
      color: #009ada;
      border: 1px solid #009ada;
      border-radius: 3px;
      padding: 3px 10px;
      display: inline-block;
      letter-spacing: 1px;
      height: 20px;
    }
    >div{
      margin-top: 15px;
      overflow: hidden;
      height: 25px;
      >b{
        float: right;
        width: 60px;
        height: 25px;
        background-image: url('../assets/img/downLoad.jpg');
        background-size: 100% 100%;
      }
      >p{
        float: right;
        margin-top: 5px;
        margin-right: 10px;
        font-size: 15px;
        color: #000;
        letter-spacing: 1px;
        font-weight: 700;
      }
    }
  }
  .about_info{
    text-align: left;
    margin-top: 20px;
    >span{
     margin-left: 25px;
      color: #80d2f0;
    }
    >div{
      position: relative;
      height: 3px;
      margin-top: 12px;
      >h1{
       position: absolute;
        width: 100%;
        height: 100%;
        background-color: #eee;
      }
      >p{
      position: absolute;
      width: 16%;
      height: 100%;
      background-color: #81b8cd;
      }
    }
    >h5{
      padding-top: 15px;
      color: #777;
      font-weight: 700;
      >div{
        margin-bottom: 5px;
        >span{
          float: left;
          width: 16px;
          height: 16px;
          background: #f10;
          margin-right: 8px;
          margin-top: 5px;
          margin-left: 20px;
          border-radius: 50%;
          background-image: url('../assets/img/activeRed.png');
          background-size: 100% 100%;
        }
        >p{
          overflow: hidden;
          line-height: 17px;
          padding-top: 5px;
          padding-right: 24px;
        }
      }
    }
  }
  .add_car_wrap{
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ddd;
    >span{
      position: relative;
      float: left;
      width: 35px;
      height: 35px;
     background-size: 100% 100%;
      background-image: url('../assets/img/shoping_car.png');
      margin-left: 26px;
      margin-top: 9px;
      >b{
        position: absolute;
        width: 20px;
        height: 20px;
        background: #f10;
        border-radius: 50%;
        right: -9px;
        line-height: 19px;
        top: -10px;
        color: #fff;
        font-weight: 900;
        z-index: 10;
      }
      >.animate{
        animation:add_shop_car 0.28s
      }
      >.big{
        width: 28px;
        height: 28px;
        line-height: 29px;
        top: -16px;
        right: -15px;
      }
    }
    >b{
      float: right;
      width: 120px;
      height: 50px;
      line-height: 50px;
      background: #019fe8;
      color: #fff;
      font-size: 14px;
      letter-spacing: 1px;
      &:active{
        background: #008ed7;
      }
    }
  }
  .fade-enter-active /* .fade-leave-active below version 2.1.8 */
  {
   transform: translateX(100%);
    opacity: 0;
  }
  .fade-enter-to /* .fade-leave-active below version 2.1.8 */
  {
    transform: translateX(0);
    opacity: 1;
    transition: all .5s;
  }
  .fade-leave-active{
    transform: translateX(0);
    opacity: 1;
  }
  .fade-leave-to{
    transform: translateX(100%);
    opacity: 0;
    transition: all .5s;
  }
  .fixed_wrap{
    margin: 0 auto;
    max-width: 768px;
  }
  .miaosha_wrap{
    margin-top: 9px;
    >div{
      height: 70px;
      background: #eee;
      padding-top: 5px;
      >div{
        width: 68%;
        float: left;
        height: 60px;
        >div{
          height: 35px;
          >span{
            float: left;
            /* height: 35px; */
            margin-left: 20px;
            font-size: 15px;
            font-weight: 900;
            color: #20a3d6;
            margin-top: 9px;
          }
          >s{
            float: left;
            margin-top: 12px;
            margin-left: 4px;
            color: #999;
          }
          >b{
            float: right;
            margin-top: 6px;
            width: 60px;
            height: 22px;
            line-height: 22px;
            background-color: #4db2eb;
            color: #fff;
            border-radius: 6px;
          }
        }
        >p{
          height: 25px;
          text-align: left;
          margin-left: 20px;
          font-size: 14px;
          font-weight: 900;
          margin-top: 3px;
        }
      }
      >h5{
        float: right;
        width: 32%;
        >p{
          margin-top: 9px;
          height: 15px;
          color: #999;
        }
        >div{
          height: 30px;
          margin-top: 2px;
          color: #999;
          >b{
            display: inline-block;
            width: 19px;
            height: 25px;
            line-height: 25px;
            background-color: #4db2eb;
            color: #fff;
            border-radius: 3px;
            margin-right: 2px;
          }
        }
      }
    }
    >p{
      font-size: 12px;
      text-align: left;
      margin-left: 20px;
      margin-top: 13px;
      font-weight: 900;
      color: #999;
    }
  }

  @keyframes add_shop_car
  {
    0%{transform: rotateY(0deg)}
    50% {transform:rotateY(90deg)}
    100% {transform: rotateY(0deg)}
  }
</style>
